<style scoped>
.handle-box {
    margin-bottom: 20px;
}
.box_iten {
    display: flex;
    flex-wrap: wrap;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  ::v-deep .el-upload--text{
    width: auto;
  }
</style>
<!-- tsx -->
<template>
    <div class="package">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-tickets"></i> 会 员 列 表 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input
                    clearable
                    v-model="query.name"
                    style="width: 200px; margin: 0 20px 0 0"
                    placeholder="商品名称"
                    class="handle-input mr10"
                ></el-input>
                <el-select placeholder="分类" style="width: 200px; margin: 0 20px 0 0" clearable v-model="query.categoryID">
                    <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <el-select placeholder="品牌" style="width: 200px; margin: 0 20px 0 0" clearable v-model="query.brandId">
                    <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <el-button type="primary" @click="getList">搜索</el-button>
                <el-button type="warining" @click="showaddinfo = true">新增</el-button>
            </div>
            <el-table :data="tableData" height="400" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                <!-- <el-table-column prop="id" label="ID" show-overflow-tooltip width="150" align="center"></el-table-column> -->
                <el-table-column prop="" label="缩略图" align="center">
                    <template slot-scope="scope">
                        <el-image style="width: 50px; height: 50px" :src="scope.row.thumbnail" :preview-src-list="[scope.row.thumbnail]">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="code" label="商品编号" width="100" align="center">
                    <!-- <template slot-scope="scope">
                    <span v-if="scope.row.fundTypeName == 10" >余额</span>
                    <span v-if="scope.row.fundTypeName == 20" >期权</span>
                    <span v-if="scope.row.fundTypeName == 30" >互助</span>
                  </template> -->
                </el-table-column>
                <el-table-column prop="name" label="商品名称" width="100" align="center"> </el-table-column>
                <el-table-column prop="categoryName" label="分类名称" width="100" align="center"></el-table-column>
                <el-table-column prop="brandName" label="品牌名称" width="100" align="center"></el-table-column>
                <el-table-column prop="category" label="商品类型" width="200" align="center"></el-table-column>
                <el-table-column prop="status" label="状态" align="center"> </el-table-column>
                <el-table-column label="操作" width="150" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger" v-if="scope.row.status == '上架'" @click="close(scope.row.id)">下架</el-button>
                        <el-button size="mini" type="warning" v-else @click="open(scope.row.id)">上架</el-button>
                        <el-button size="mini" type="primary" @click="queryDetail(scope.row.id)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    @size-change="sizeChange"
                    @current-change="pageChange"
                    :current-page="query.pageIndex"
                    :page-sizes="[20, 50, 100, 200]"
                    :page-size="query.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal"
                >
                </el-pagination>
            </div>
        </div>
        <el-dialog title="修改" :visible.sync="showeditinfo" width="80%">
            <el-form ref="send" :model="editinfo" label-width="150px" label-position="left">
                <el-form-item label="商品名称:" label-width="100px" style="width:50%">
                    <el-input v-model="editinfo.name" ></el-input>
                </el-form-item>
                <el-form-item label="商品编号:" label-width="100px" style="width:50%">
                    <el-input v-model="editinfo.code" ></el-input>
                </el-form-item>
                <el-form-item label="排序:" label-width="100px" style="width:50%">
                    <el-input v-model="editinfo.levelCode" ></el-input>
                </el-form-item>
                <el-form-item label="商品描述:" label-width="100px" style="width:50%">
                    <el-input v-model="editinfo.desoribe" ></el-input>
                </el-form-item>
                <el-form-item label="商品类型:" label-width="100px" style="width:50%">
                    <el-input v-model="editinfo.categoryType" ></el-input>
                </el-form-item>
                <el-form-item label="分类ID:" label-width="100px" style="width:50%">
                    <el-select placeholder="分类"  clearable style="width:100%" v-model="editinfo.categoryId">
                        <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="品牌ID:" label-width="100px" style="width:50%">
                    <el-select placeholder="品牌"  clearable style="width:100%" v-model="editinfo.brandId">
                        <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" label-width="100px" style="width:50%">
                    <el-select v-model="editinfo.status" style="width:100%">
                        <el-option label="上架" :value="true"></el-option>
                        <el-option label="下架" :value="false"></el-option>
                    </el-select>
                </el-form-item>
                
                <el-form-item label="缩略图" label-width="100px" style="width:50%">
                    <el-upload
                      :action="$url"
                      class="avatar-uploader"
                      :data="{'fileCategory': 10}"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess1_e">
                      <img v-if="editinfo.thumbnail" class="avatar" :src="editinfo.thumbnail" alt="">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="商品详情图" label-width="100px" style="width:50%">
                    <el-upload
                      :action="$url"
                      class="avatar-uploader"
                      :data="{'fileCategory': 10}"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess2_e">
                      <img v-if="editinfo.introduction" class="avatar" :src="editinfo.introduction" alt="">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="商品轮播图:" label-width="100px" style="width:100%">
                    <el-upload
                      :action="$url"
                      class="avatar-uploader"
                      style="width:100%"
                      list-type="picture-card"
                      :data="{'fileCategory': 10}"
                      :file-list="editinfo.resourcelist"
                      :on-success="handleAvatarSuccess3_e"
                      :on-remove="handleRemove">
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="商品规格信息:" label-width="100px" style="width:100%">
                        <el-button size="mini" type="danger" @click="showGuige = true">添加规格</el-button>
                </el-form-item>
                
                <el-table :data="editinfo.standardlist" height="400" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column prop="level" label="排序" width="100" align="center"></el-table-column>
                <el-table-column prop="name" label="规格名称" width="100" align="center">
                </el-table-column>
                <el-table-column prop="standardValue" label="规格值" width="100" align="center"> </el-table-column>
                
                <el-table-column prop="marketPrice" label="市场价" width="100" align="center"></el-table-column>
                <el-table-column prop="retailPrice" label="零售价" width="200" align="center"></el-table-column>
                <el-table-column prop="maxScore" label="积分价" align="center"> </el-table-column>
                <el-table-column align="center" prop="isMembrane" label="是否膜类产品" :formatter="formatBoolean"
                                 :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="操作" width="150" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="updateGuige(scope)">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showeditinfo = false">取 消</el-button>
                <el-button type="primary" @click="sureSend">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="新增" :visible.sync="showaddinfo" width="80%">
            <el-form ref="send" :model="addinfo" label-width="150px" label-position="left">
                <el-form-item label="商品名称:" label-width="100px" style="width:50%">
                    <el-input v-model="addinfo.name" ></el-input>
                </el-form-item>
                <el-form-item label="商品编号:" label-width="100px" style="width:50%">
                    <el-input v-model="addinfo.code" ></el-input>
                </el-form-item>
                <el-form-item label="排序:" label-width="100px" style="width:50%">
                    <el-input v-model="addinfo.levelCode" ></el-input>
                </el-form-item>
                <el-form-item label="商品描述:" label-width="100px" style="width:50%">
                    <el-input v-model="addinfo.desoribe" ></el-input>
                </el-form-item>
                <el-form-item label="商品类型:" label-width="100px" style="width:50%">
                    <el-input v-model="addinfo.categoryType" ></el-input>
                </el-form-item>
                <el-form-item label="分类ID:" label-width="100px" style="width:50%">
                    <el-select placeholder="分类"  clearable style="width:100%" v-model="addinfo.categoryId">
                        <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="品牌ID:" label-width="100px" style="width:50%">
                    <el-select placeholder="品牌"  clearable style="width:100%" v-model="addinfo.brandId">
                        <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" label-width="100px" style="width:50%">
                    <el-select v-model="addinfo.status" style="width:100%">
                        <el-option label="上架" :value="true"></el-option>
                        <el-option label="下架" :value="false"></el-option>
                    </el-select>
                </el-form-item>
                
                <el-form-item label="缩略图" label-width="100px" style="width:50%">
                    <el-upload
                      :action="$url"
                      class="avatar-uploader"
                      :data="{'fileCategory': 10}"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess1_a">
                      <img v-if="addinfo.thumbnail" class="avatar" :src="addinfo.thumbnail" alt="">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="商品详情图" label-width="100px" style="width:50%">
                    <el-upload
                      :action="$url"
                      class="avatar-uploader"
                      :data="{'fileCategory': 10}"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess2_a">
                      <img v-if="addinfo.introduction" class="avatar" :src="addinfo.introduction" alt="">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="商品轮播图:" label-width="100px" style="width:100%">
                    <el-upload
                      :action="$url"
                      class="avatar-uploader"
                      style="width:100%"
                      list-type="picture-card"
                      :data="{'fileCategory': 10}"
                      :file-list="addinfo.resourcelist"
                      :on-success="handleAvatarSuccess3_a"
                      :on-remove="handleRemove_a">
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="商品规格信息:" label-width="100px" style="width:100%">
                        <el-button size="mini" type="danger" @click="showGuige_a = true">添加规格</el-button>
                </el-form-item>
                <el-table :data="addinfo.standardlist" height="400" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column prop="level" label="排序" width="100" align="center"></el-table-column>
                <el-table-column prop="name" label="规格名称" width="100" align="center">
                </el-table-column>
                <el-table-column prop="standardValue" label="规格值" width="100" align="center"> </el-table-column>
                
                <el-table-column prop="marketPrice" label="市场价" width="100" align="center"></el-table-column>
                <el-table-column prop="retailPrice" label="零售价" width="200" align="center"></el-table-column>
                <el-table-column prop="maxScore" label="积分价" align="center"> </el-table-column>
                <el-table-column align="center" prop="isMembrane" label="是否膜类产品" :formatter="formatBoolean"
                                 :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="操作" width="150" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="updateGuige_a(scope)">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showaddinfo = false">取 消</el-button>
                <el-button type="primary" @click="sureSend2">确 定</el-button>
            </span>
        </el-dialog>
        
        <el-dialog title="规格" :visible.sync="showGuige" width="500px" :before-close="bef">
            <el-form ref="send" :model="guigeFrom" label-width="100px">
                <el-form-item label="规格名称:" label-width="100px" style="width:50%">
                    <el-input v-model="guigeFrom.name" ></el-input>
                </el-form-item>
                <el-form-item label="规格值:" label-width="100px" style="width:50%">
                    <el-input v-model="guigeFrom.standardValue" ></el-input>
                </el-form-item>
                <el-form-item label="排序:" label-width="100px" style="width:50%">
                    <el-input v-model="guigeFrom.level" ></el-input>
                </el-form-item>
                <el-form-item label="市场价:" label-width="100px" style="width:50%">
                    <el-input v-model="guigeFrom.marketPrice" ></el-input>
                </el-form-item>
                <el-form-item label="零售价:" label-width="100px" style="width:50%">
                    <el-input v-model="guigeFrom.retailPrice" ></el-input>
                </el-form-item>
                <el-form-item label="积分价:" label-width="100px" style="width:50%">
                    <el-input v-model="guigeFrom.maxScore" ></el-input>
                </el-form-item>
                <el-form-item label="是否膜类产品:" label-width="100px" style="width:50%">
                    <el-checkbox v-model="guigeFrom.isMembrane" ></el-checkbox>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showGuige = false">取 消</el-button>
                <el-button type="primary" @click="sureGuige">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="规格" :visible.sync="showGuige_a" width="500px" :before-close="bef_a">
            <el-form ref="send" :model="guigeFrom_a" label-width="100px">
                <el-form-item label="规格名称:" label-width="100px" style="width:50%">
                    <el-input v-model="guigeFrom_a.name" ></el-input>
                </el-form-item>
                <el-form-item label="规格值:" label-width="100px" style="width:50%">
                    <el-input v-model="guigeFrom_a.standardValue" ></el-input>
                </el-form-item>
                <el-form-item label="排序:" label-width="100px" style="width:50%">
                    <el-input v-model="guigeFrom_a.level" ></el-input>
                </el-form-item>
                <el-form-item label="市场价:" label-width="100px" style="width:50%">
                    <el-input v-model="guigeFrom_a.marketPrice" ></el-input>
                </el-form-item>
                <el-form-item label="零售价:" label-width="100px" style="width:50%">
                    <el-input v-model="guigeFrom_a.retailPrice" ></el-input>
                </el-form-item>
                <el-form-item label="积分价:" label-width="100px" style="width:50%">
                    <el-input v-model="guigeFrom_a.maxScore" ></el-input>
                </el-form-item>
                <el-form-item label="是否膜类产品:" label-width="100px" style="width:50%">
                    <el-checkbox v-model="guigeFrom.isMembrane" ></el-checkbox>
                </el-form-item>0
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showGuige_a = false">取 消</el-button>
                <el-button type="primary" @click="sureGuige_a">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { PagingMember, QueryInfo, Disable, Enable, UpdateMobile, UpdateParent, UpdateRank } from '@/api/member';
import { PagingBrand } from '@/api/brand';
import { PagingCategory } from '@/api/category';
import { PagingGoods, GoodsDisable, GoodsEnable, QueryGoodsInfo,UpdateGoods,AddGoods } from '@/api/finance';
import { Recharge, Deduction } from '@/api/vip';
export default {
    // import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        // 这里存放数据
        return {
            query: {
                pageIndex: 1,
                pageSize: 20,
                mobile: '',
                openid: '',
                rank: ''
            },
            pageTotal: 0,
            guigeFrom:{},
            guigeFrom_a:{},
            showGuige:false,
            addinfo:{
              resourcelist:[],
              standardlist: []
            },
            showCz: false,
            editinfo: {
              resourcelist:[],
              standardlist: []
            },
            categoryList: [],
            brandList: [],
            fileList:[],
            showaddinfo:false,
            czFrom: {
                mobile: '',
                fundType: '',
                amount: ''
            },
            senInfo2: {
                mobile: '',
                fundType: '',
                amount: ''
            },
            tableData: [],
            rankList: [],
            showGuige_a:false,
            senInfoShow2: false,
            senInfoShow: false,
            showChangeMobile: false,
            showChangerank: false,
            senInfo: {},
            changePhone: {
                id: '',
                mobile: ''
            },
            tuijianPhone: {
                id: '',
                mobile: ''
            },
            showeditinfo:false,
            changeRank: {},
            showtuijianMobile: false,
            currentId: ''
        };
    },
    // 过滤器
    filters: {},
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        formatBoolean: function (row, column, cellValue) {
                var ret = ''  //你想在页面展示的值
                if (cellValue) {
                    ret = "是"  //根据自己的需求设定
                } else {
                    ret = "否"
                }
                return ret;
            },
      sureSend2(){
        AddGoods(this.addinfo).then(res => {
          if (res.RequestStatus == 200) {
                            this.$message.success('添加成功');
                            this.getList();
                            this.showaddinfo = false
                        }
        })
      },
      bef(d){
        this.guigeFrom = {}
        d()
      },
      deleteGuige(scope){
        this.editinfo.standardlist.splice(scope.$index,1)
      },
      deleteGuige_a(scope){
        this.addinfo.standardlist.splice(scope.$index,1)
      },
      bef_a(d){
        this.guigeFrom_a = {}
        d()
      },
      sureGuige_a(){
        console.log(this.addinfo)
         if(this.guigeFrom_a.isUpdate){
        
         }else{
            this.addinfo.standardlist.unshift(this.guigeFrom_a)
         }
         this.guigeFrom_a = {}
        this.showGuige_a = false
      },
      updateGuige(scope){
        this.guigeFrom = this.editinfo.standardlist[scope.$index]
        this.showGuige = true
      },
      updateGuige_a(scope){
        this.guigeFrom_a = this.addinfo.standardlist[scope.$index]
        this.guigeFrom_a.isUpdate = true
        this.showGuige_a = true
      },
      sureGuige(){
         if(this.guigeFrom.isUpdate){
           this.showGuige = false
         }else{
           this.editinfo.standardlist.unshift(this.guigeFrom)
         }
         this.guigeFrom = {}
        this.showGuige = false
      },
      updateGuige(scope){
        this.guigeFrom = this.editinfo.standardlist[scope.$index]
        this.guigeFrom.isUpdate = true
        this.showGuige = true
      },
      handleAvatarSuccess1_e(res){
        this.$set(this.editinfo,'thumbnail',this.$baseUrl + res.Data.url)
      },
       handleAvatarSuccess2_e(res){
        this.$set(this.editinfo,'introduction',this.$baseUrl + res.Data.url)
      },
       handleAvatarSuccess3_e(res){
        this.editinfo.resourcelist.push({
            type:10,
            url: this.$baseUrl +  res.Data.url,
            leve:this.editinfo.resourcelist.length + 1})
      },
      handleAvatarSuccess1_a(res){
        this.$set(this.addinfo,'thumbnail',this.$baseUrl + res.Data.url)
      },
       handleAvatarSuccess2_a(res){
        this.$set(this.addinfo,'introduction',this.$baseUrl + res.Data.url)
      },
       handleAvatarSuccess3_a(res){
        this.addinfo.resourcelist.push({
            type:10,
            url: this.$baseUrl +  res.Data.url,
            leve:this.addinfo.resourcelist.length + 1})
      },
      handleRemove(file, fileList) {
        this.editinfo.resourcelist = JSON.parse(JSON.stringify(fileList))
      },
       handleRemove_a(file, fileList) {
        this.addinfo.resourcelist = JSON.parse(JSON.stringify(fileList))
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
        sureSend() {
            UpdateGoods(this.editinfo).then(res => {
              if (res.RequestStatus == 200) {
                            this.$message.success('修改成功');
                            this.getList();
                            this.showeditinfo = false
                        }
            })
        },
        queryDetail(id) {
            this.currentId = id;
            this.changePhone.id = id;
            this.tuijianPhone.id = id;
            this.changeRank.id = id;
            QueryGoodsInfo({ id: id }).then(res => {
                // console.log(res)
                this.editinfo = res.Data;
                this.showeditinfo = true;
            });
        },
        close(id) {
            this.$confirm('确定下架?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    GoodsDisable({ id: id }).then(res => {
                        //   console.log(res)
                        if (res.RequestStatus == 200) {
                            this.$message.success('禁用成功');
                            this.getList();
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消禁用'
                    });
                });
        },
        open(id) {
            this.$confirm('确定上架?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    GoodsEnable({ id: id }).then(res => {
                        //   console.log(res)
                        if (res.RequestStatus == 200) {
                            this.$message.success('启用成功');
                            this.getList();
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消启用'
                    });
                });
        },
        pageChange(e) {
            this.query.pageIndex = e;
            this.getList();
        },
        getList() {
            PagingGoods(this.query).then(res => {
                this.tableData = res.Data.list;
                this.pageTotal = res.Data.paging.totalItemCount;
                this.rankList = res.Data.rankList;
            });
        },
        sizeChange(e) {
            this.query.pageSize = e;
            this.getList();
        },
        searchDetail(info) {
            //   console.log(info)
            this.senInfo = JSON.parse(JSON.stringify(info));
            this.senInfoShow = true;
        },
        deleteDetail(info) {
            this.senInfo2 = JSON.parse(JSON.stringify(info));
            this.senInfoShow2 = true;
        }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
        console.log(123);
        this.getList();
        PagingCategory({ pageIndex: 1, pageSize: 100 }).then(res => {
            this.categoryList = res.Data.list;
        });
        PagingBrand({ pageIndex: 1, pageSize: 100 }).then(res => {
            this.brandList = res.Data.list;
        });
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, // 生命周期 - 创建之前
    beforeMount() {}, // 生命周期 - 挂载之前
    beforeUpdate() {}, // 生命周期 - 更新之前
    updated() {}, // 生命周期 - 更新之后
    beforeDestroy() {}, // 生命周期 - 销毁之前
    destroyed() {}, // 生命周期 - 销毁完成
    ctivated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
